<template>
  <div class="sign-up">
    <!-- <div class="top">报名管理</div> -->
    <div class="table">
      <div class="activity-mes" style="margin-bottom:20px;">
        <img style="width:60px;height:60px;" :src="mes.cover" alt />
        <span style="font-size:18px;margin-left:10px;">{{mes.name}}</span>
      </div>
      <!-- <div class="table-top">
        <div class="title-wrapper">
          <Input placeholder="请输入手机号" @search="hanldeSearch" />
        </div>
      </div>-->
      <div class="operation">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="已报名" name="first" />
          <el-tab-pane label="已签到" name="second" />
        </el-tabs>
      </div>
      <el-table :data="applyList" style="width: 100%" :height="height">
        <!-- <el-table-column prop="date" label="活动信息" width="300">
          <template slot-scope="scope">
            <div class="d-flex">
              <el-avatar shape="square" :size="70" :src="scope.row.activity_cover" />
              <p class="ml" style="width: 200px">{{ scope.row.activity_name }}</p>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="phone" label="联系方式" />
        <el-table-column prop="created_at" label="申请时间" />
      </el-table>
    </div>
    <Pagination
      class="pagination"
      :total="total"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
  </div>
</template>
<script>
import Input from "@/common/input";
import Pagination from "@/common/pagination";
import Resize from "@/common/mixins/resize";
import { getActivitySignList } from "@/api/http/activity";
const ERR_OK = 200;
export default {
  components: {
    Input,
    Pagination
  },
  mixins: [Resize],
  data() {
    return {
      id:0,
      mes: {
        cover:"",
        name:""
      },
      activeName: "first",
      status: 0,
      defaultHeight: 280,
      applyList: null,
      total: 0,
      currentPage: 1,
      query: ""
    };
  },
  created() {
    if(this.$route.query.id){
      this.id = this.$route.query.id;
    }
    this._getActivitySignList();
  },
  methods: {
    handleTabClick() {
      switch (this.activeName) {
        case "first":
          this.status = 0;
          break;
        case "second":
          this.status = 1;
          break;
      }
      this._getActivitySignList();
    },
    hanldeSearch(query) {
      this.query = query;
      this.currentPage = 1;
      this._getActivitySignList();
    },
    handleNextPage(page) {
      this.currentPage = page;
      this._getActivitySignList();
    },
    _getActivitySignList() {
      getActivitySignList({
        id:this.id,
        page:this.currentPage,
        keywords:this.status
      }).then(res => {
        console.log(res,'---res---000');
        this.applyList = res.data.data;
        this.total = res.data.total;
        this.mes.cover = res.data.cover;
        this.mes.name = res.data.name;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
.top {
  line-height: 44px;
  color: rgba(68, 68, 68, 1);
  font-size: 18px;
  text-align: left;
  font-family: Roboto;
  font-weight: bold;
}
.table-top {
  margin-bottom: 20px;
}
.d-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ml {
  margin-left: 10px;
}
.operation{
  /deep/ .el-tabs__item{
    font-size: 18px;
  }
}
.activity-mes{
  display: flex;
  align-items: center;
}
</style>
